window.addEventListener('load', function () {
    //拿到按钮
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    //拿到主盒子
    var main = document.querySelector('.lb');
    //拿到图片的ul父盒子
    var uls = document.querySelector('.ulList');
    //拿到小圆点
    var ols = document.querySelector('ol');
    //拿到主盒子的宽度
    var mainWidth = main.offsetWidth;
    //index
    var index = 0;
    var nums = 0;
    var yd = 0;
    main.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block';
    })
    main.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none';
    })
    for (var i = 0; i < uls.children.length; i++) {
        let li = document.createElement('li');
        ols.appendChild(li);
        li.setAttribute('index', i);
        li.addEventListener('click', function () {
            for (var j = 0; j < ols.children.length; j++) {
                ols.children[j].className = ''
            }
            this.className = 'current';
            //拿到当前原点的索引号
            index = this.getAttribute('index');
            nums = index;
            yd = index;
            animate(uls, -index * mainWidth);
        })
    }
    ols.children[0].className = 'current';

    arrow_r.addEventListener('click', function () {
        nums++;
        if (nums >= uls.children.length) {
            nums = 0;
            uls.style.left = 0 + 'px';
        } else {
            animate(uls, -nums * mainWidth);
        }
        yd++;
        console.log(yd);
        if (yd >= uls.children.length) {
            yd = 0;
            circleChange(yd);
        } else {
            circleChange(yd);
        }
    })
    arrow_l.addEventListener('click', function () {
        nums--;
        if (nums < 0) {
            nums = uls.children.length - 1;
            uls.style.left = -(uls.children[0].clientWidth * (uls.children.length - 1)) + 'px';
        } else {
            animate(uls, -nums * mainWidth);
        }
        yd--;
        console.log(yd);
        if (yd < 0) {
            yd = uls.children.length - 1;
            circleChange(yd);
        } else {
            circleChange(yd);
        }
    })

    function circleChange(num) {
        for (var i = 0; i < uls.children.length; i++) {
            ols.children[i].className = '';
        }
        ols.children[num].className = 'current';
    }
})